<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>INA 项目</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/album.css" rel="stylesheet">
  </head>

  <body>

    <header>
      <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
              <h4 class="text-white">About</h4>
              <p class="text-muted">兰州交通大学互联网络协会成立于2000年3月，分属兰州交通大学电子与信息工程学院。经过十八年的发展，已成为交大最正式的协会和校园影响力最大的协会之一，拥有完整的技术传承与研究体系，涉及网站搭建、视频制作、平面设计、专业PPT制作、微信运维等技术，此外也协助或承接学校各学院官网的建设，并参与电信学院每年的迎新晚会视频的制作。协会每年都会推出面向全校甚至全市的大型精品活动，受到广大师生的广泛好评。</p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
              <h4 class="text-white">Contact</h4>
              <ul class="list-unstyled">
                <li><a href="#" class="text-white">QQ群：1246712776</a></li>
                <li><a href="#" class="text-white">负责人QQ：709560271</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
            <strong>INA Projects</strong>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </header>

    <main role="main">

      <section class="jumbotron text-center">
        <div class="container">
          <h1 class="jumbotron-heading">INA 开源项目</h1>
          <p class="lead text-muted">开放源代码（Open source code）也称为源代码公开，指的是一种软件发布模式。互联网络协会决定以开放的形式为大家提供便利，所以将一些方面做成了开源项目或计划项目，同时也欢迎你们加入我们。</p>
          <p>
            <a href="#" class="btn btn-primary my-2">查看项目列表</a>
            <a href="#" class="btn btn-secondary my-2">选择技术方向(暂不开放)</a>
          </p>
        </div>
      </section>

      <div class="album py-5 bg-light">
        <div class="container">

          <div class="row">
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=微信小程序教程" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：INA_wxApp_Course<br>小程序作为微信新的战略级产品，正悄然改变着我们的应用结构。互联网络协会专门写了入门的相关课程在wiki中作为开源课程项目。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/INA_wxApp_Course/wikis"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                      <!-- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> -->
                    </div>
                    <small class="text-muted">2018-9-1</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=SpringCloud" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：ina-spring-cloud<br>微服务架构集大成者，云计算最佳业务实践。当下最流行的微服务架构，首选Spring Cloud。互联网络协会从最简单的应用开始，为你编写的入门指南。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/ina-spring-cloud/wikis"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                    </div>
                    <small class="text-muted">2018-9-9</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=机器学习教程" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：ina-machine-learning<br>机器学习是人工智能的一个分支，而我们试图将你们带进门，感兴趣会知道自己需要去学习什么内容，从而继续学习。学习，从来不是一件简单的事情。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/ina-machine-learning/wikis"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                    </div>
                    <small class="text-muted">2018-9-10</small>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：ina_display<br>这是一个简单的用WEB前端实现的VR效果的例子，具体的可以看一下代码。鉴于需要建模跟数学的基础，所以暂时没补充教程。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/ina_display"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                    </div>
                    <small class="text-muted">2018-9-10</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=安卓教程" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：ina_android<br>Android是我最喜欢的系统，但是现在混合式开发的冲击波波及到了它。这个项目是一个计划，但是因为过于复杂所以搁置。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/ina_android/wikis"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                    </div>
                    <small class="text-muted">2018-9-10</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=网络安全教程" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">项目名称：INA_Web_Security<br>网络安全的知识可以满足大家对黑客的向往之情，其实网络安全是你我都可以使用到的小技巧。这个教程就是从最小处开始。</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <a href="https://gitee.com/aidenctos/INA_Web_Security"><button type="button" class="btn btn-sm btn-outline-secondary">查看</button></a>
                    </div>
                    <small class="text-muted">2018-9-10</small>
                  </div>
                </div>
              </div>
            </div>

          
          </div>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-sm">
            </div>
            <div class="col-sm-5">
              <h1>项目计划 &nbsp;<small class="text-muted">正在开发中...</small></h1>
            </div>
            <div class="col-sm">
            </div>
          </div>
        </div>

        <div class="container">
          <table class="table">
            <thead class="thead-light">
              <tr>
                <th scope="col">#</th>
                <th scope="col">名称</th>
                <th scope="col">描述</th>
                <th scope="col">状态</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>INA APP</td>
                <td>集管理与展示的app，目前后端正在用 SpringBoot 搭建</td>
                <td>
                  <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>基于Spring的CMS系统</td>
                <td>因为没有玩转好的CMS系统，所以尝试一个更加容易扩展的系统</td>
                <td>
                  <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>VBS 文档教程</td>
                <td>只有英文文档，感觉这种脚本实用性很大，所以决定翻译并整合成教程</td>
                <td>
                  <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>more...</td>
                <td>
                  <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>


      </div>

      


    </main>

    <footer class="text-muted">
      <div class="container">
        <p class="float-right">
          <a href="#">回到顶部</a>
        </p>
        <p>INA project 是 &copy; 兰州交通大学 互联网络协会 技术支持</p>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-slim.min.js"><\/script>')</script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.min.js"></script>
  </body>
</html>
